<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-row>
        <el-col :span="24">
          <el-card class="box-card">
            <!-- 简单检索 -->
            <search :data-form="authorForm" :queryfield="queryfield" @onSearch="onSearch" @todelete="todelete" @openAdvanceSearch="openAdvanceSearch" />
            <!-- 高级检索 -->
            <advance-search ref="advanced" :data-form="authoradvancedForm" :queryfield="queryfield" @onSearch="onSearch" />
            <!-- 作者列表 -->
            <el-table :data="authorTable.tablelist" style="width: 100%" @selection-change="handleSelectionChange">
              <el-table-column
                type="selection"
                width="55"
              />
              <el-table-column
                v-for="item in authorTable.columns"
                :key="item.prop"
                align="center"
                :label="item.name"
                :prop="item.prop"
                :min-width="item.min_width || 'auto'"
                :fixed="item.fixed ? item.fixed : false"
              >
                <template slot-scope="sc">
                  <div v-if="item.prop === 'Copyrighter'">{{ sc.row.Copyrighter }}</div>
                  <div v-if="item.prop === 'PenName'">{{ sc.row.PenName }}</div>
                  <div v-if="item.prop === 'Sex'">
                    {{ codetoword('Sex',sc.row.Sex) }}
                  </div>
                  <div v-if="item.prop === 'MobilePhone'">{{ sc.row.MobilePhone }}</div>
                  <div v-if="item.prop === 'Email'">{{ sc.row.Email }}</div>
                  <div v-if="item.prop === 'FAX'">{{ sc.row.FAX }}</div>
                  <div v-if="item.prop === 'Address'">{{ sc.row.Address }}</div>
                  <div v-if="item.prop === 'Postcode'">{{ sc.row.Postcode }}</div>
                  <div v-if="item.prop === 'WorkUnit'">{{ sc.row.WorkUnit }}</div>
                  <div v-if="item.prop === 'Post'">{{ sc.row.Post }}</div>
                  <div v-if="item.prop === 'ResearchAreas'">{{ sc.row.ResearchAreas }}</div>
                  <div v-if="item.prop === 'CardType'">{{ sc.row.CardType }}</div>
                  <div v-if="item.prop === 'CardID'">{{ sc.row.CardID }}</div>
                  <div v-if="item.prop === 'ResponsibilityType'">
                    {{ codetoword('ResponsibilityType',sc.row.ResponsibilityType) }}
                  </div>
                  <div v-if="item.prop === 'CreateType'">{{ sc.row.CreateType }}</div>
                  <div v-if="item.prop === 'FlagUse'">
                    {{ codetoword('FlagUse',sc.row.FlagUse) }}
                  </div>
                  <div v-if="item.prop === 'FlagForeign'">
                    {{ codetoword('FlagForeign',sc.row.FlagForeign) }}
                  </div>
                  <div v-if="item.prop === 'FlagHMT'">
                    {{ codetoword('FlagHMT',sc.row.FlagHMT) }}
                  </div>
                  <div v-else-if="item.prop === 'Operation'">
                    <i class="el-icon-tickets icon" @click="toDetail(sc.row.ID)" />
                    <i class="el-icon-edit icon" @click="toEdit(sc.row.ID)" />
                    <i class="el-icon-delete icon" @click="todelete(sc.row.ID)" />

                  </div>
                </template>
              </el-table-column>

            </el-table>
            <div class="pagination">
              <el-pagination
                :current-page="Page.current"
                :page-sizes="Page.sizes"
                :page-size="Page.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="Page.total"
                @size-change="pagesizeChange"
                @current-change="currentChange"
              />
            </div>
          </el-card>
        </el-col>
      </el-row>

    </div>
  </div>
</template>

<script>
import { authorqueryfield } from '@/api/queryfielddata.js'
import { codetoword } from '@/utils/codechangefortb.js'
import { newdirect } from '@/utils/redirect.js'
import { confirmmsg } from '@/utils/message.js'
import { search, deletesingle } from '@/api/author'
import AdvanceSearch from '@/components/Search/AdvanceSearch.vue'
import Search from '@/components/Search/Search.vue'

export default {
  components: { AdvanceSearch, Search },
  data() {
    return {
      querydata: {}, // 记录搜索的条件
      queryfield: authorqueryfield, // 作者检索字段
      authorForm:
      {
        field: '', // 检索条件
        value1: '', // 检索值1
        value2: '', // 检索值2
        // valuedate1: '', // 检索值日期1
        // selectvalue1: '', // 检索值选择的值1
        type: 'C', // 类别
        txtcount: 1, // 区分文本框是1个还是2个
        inputtype: '', // 区分是否是日历控件
        daterange: [] // 日期范围时候使用
      },
      authoradvancedForm:
      {
        field: '', // 检索条件
        value1: '', // 检索值1
        value2: '', // 检索值2
        //  valuedate1: '', // 检索值日期1
        //  selectvalue1: '', // 检索值选择的值1
        type: 'C', // 类别
        relationvalue: '',
        logicvalue: '',
        txtcount: 1, // 区分文本框是1个还是2个
        inputtype: '', // 区分是否是日历控件
        daterange: [] // 日期范围时候使用
      },
      multipleCheckbox: [], // 多选项
      authorTable: {
        columns: [
          // { prop: 'ID', name: '记录号' },
          // { prop: 'CopyrighterID', name: '著作权人流水号' },
          { prop: 'Copyrighter', name: '著作权人' }, //
          { prop: 'PenName', name: '笔名' }, //
          { prop: 'Sex', name: '性别' }, //
          { prop: 'MobilePhone', name: '手机', min_width: 110 }, //
          { prop: 'Email', name: '邮箱', min_width: 150 },
          // { prop: 'FAX', name: '传真', min_width: 130 },
          // { prop: 'Address', name: '通讯地址', min_width: 150 },
          { prop: 'Postcode', name: '邮编' },
          // { prop: 'Age', name: '年龄' },
          // { prop: 'Degree', name: '学位' },
          // { prop: 'Title', name: '职称' },
          // { prop: 'Nationality', name: '国籍' },
          // { prop: 'Area', name: '地区' },
          // { prop: 'NativePlace', name: '籍贯' },
          // { prop: 'Nation', name: '民族' },
          // { prop: 'Politics', name: '政治面貌' },
          // { prop: 'WorkUnit', name: '工作单位', min_width: 150 },
          { prop: 'Post', name: '职务' },
          // { prop: 'OfficePhone', name: '办公电话' },
          { prop: 'ResearchAreas', name: '主要研究领域', min_width: 110 },
          // { prop: 'Introduction', name: '作者介绍' },
          // { prop: 'CardType', name: '证件类别' },
          // { prop: 'CardID', name: '证件号码', min_width: 130 },
          // { prop: 'CardPhoto', name: '证件照片' },
          // { prop: 'Photo', name: '照片' },
          { prop: 'ResponsibilityType', name: '类别' },
          { prop: 'CreateType', name: '创作类别' },
          // { prop: 'Bank', name: '开户行' },
          // { prop: 'BankAccount', name: '银行账号' },
          // { prop: 'LoginUserName', name: '登录账号' },
          // { prop: 'LoginPassWord', name: '登录密码' },
          // { prop: 'InputBy', name: '录入人' },
          // { prop: 'InputTime', name: '录入日期' },
          { prop: 'FlagUse', name: '账号启用' }, //
          { prop: 'FlagForeign', name: '是否外国作者', min_width: 110 },
          { prop: 'FlagHMT', name: '是否港澳台作者', min_width: 120 },
          { prop: 'Operation', name: '操作', fixed: 'right', min_width: 90 }
        ],
        tablelist: []
      },
      Page: {
        current: 1,
        sizes: [10, 20, 30],
        pagesize: 10,
        total: 100
      }
    }
  },
  created() {
    this.onSearch()
  },
  methods: {
    async onSearch(querydata, type) { // 检索
      if (type === 'btn') {
        this.Page.current = 1 // 按钮检索每次从第一页检索，否则返回空
      }
      this.querydata = querydata// 必须记录下来，否则分页组件和删除后刷新页面无法正常展示页面信息
      console.log('querydata', querydata, 'type', type)
      var data = {
        ...querydata, // 简单检索没有整体取反
        Page: this.Page.current,
        nPageSize: this.Page.pagesize
      }

      const res = await search(data)
      console.log('res', res)
      this.authorTable.tablelist = res.data
      this.Page.total = res.count
      // this.authorTable.tablelist.push(res) // rap2使用
    },
    openAdvanceSearch() { // 打开高级检索
      this.$refs['advanced'].open()
    },
    pagesizeChange(val) {
      this.Page.pagesize = val
      this.onSearch(this.querydata)
    },
    currentChange(val) {
      this.Page.current = val
      this.onSearch(this.querydata)
    },
    codetoword(query, code) {
      return codetoword(query, code)
    },
    toDetail(ID) {
      const path = '/authorManagement/detail'
      const query = { ID: ID }
      newdirect(this, path, query)
    },
    toEdit(ID) {
      const path = '/authorManagement/edit'
      const query = { ID: ID }
      newdirect(this, path, query)
    },
    todelete(ID) { // ID为undefined的时候表示是批量删除
      const IDdata = (ID === undefined) ? this.multipleCheckbox : ID
      // console.log('iiii', ID3)
      const msg = '此操作将永久删除该记录, 是否继续?'
      const test = confirmmsg(this, deletesingle, IDdata, this.onSearch, this.querydata, msg)
      console.log('test----', test)
    },
    handleSelectionChange(val) {
      let str = ''
      val.forEach(item => {
        str += item.ID + ','
      })
      this.multipleCheckbox = str.slice(0, str.length - 1)
      // console.log('this.multipleCheckbox', this.multipleCheckbox)
    }

  }
}
</script>

<style  scoped lang="scss">
.app-container{
  margin: 0 auto;
}

/*调整输入框的大小*/
::v-deep .el-input__inner {
    height: 30px;
  }
  ::v-deep .el-range-editor.el-input__inner{
    padding:0 9px;
    margin-top:5px;
  }
  ::v-deep .el-date-editor .el-range__icon{
    line-height:28px;
  }

  /*调整icon的悬浮颜色*/
.icon{
  margin-right: 14px;
}
 .icon:hover{
  color:#66b1ff;
  cursor: pointer;
}
.pagination{
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
/*th上的checkbox有些偏左，这里重新赋值对齐*/
::v-deep .el-table th>.cell{
  padding-left: 14px;
}
/*批量删除abtndel，用于定位*/
.abtndel00000{
    position: fixed;
    display: inline-block;
    padding-left: 61%;
    padding-top: 1%;
    font-size: 12px;
    text-decoration: underline;
    z-index: 2;
}
.abtndel{
    font-size: 12px;
    text-decoration: underline;
    position: absolute;
    right:0;
    width: 100%;
    margin-right:  calc(-70vw );
    top: 40px;
    z-index: 2;
}
</style>

<!-- right: 0;
margin-right: 25.6%; -->
